<script>
export default {
  name: 'MultipleInput',
  props: {
    houDelVO: Object,
    configItem: Object,
    type: String,
  },
  render() {
    const { houDelVO, configItem, type } = this;

    const childs = (type == 'edit' ? configItem.contents : configItem.contents.filter((v) => v.base)).map((item, i) => {
      return (
        <div class="multiple-input" style="width: 94px" key={i}>
          <el-form-item prop={item.key} rules={item.rules || []}>
            <el-input
              v-model={houDelVO[item.key]}
              placeholder={item.placeholder}
              readonly={item.readonly}
              class={{
                'reject-input': configItem.required && !configItem.checkValue(houDelVO[item.key]),
              }}
            >
              <i slot="suffix" style="font-style: normal">
                {item.unit}
              </i>
            </el-input>
          </el-form-item>
        </div>
      );
    });

    return <div class="d-flex"> {childs} </div>;
  },
};
</script>
<style scoped>
.reject-input >>> .el-textarea__inner {
  border-color: red;
}
.reject-input >>> .el-input__inner {
  border-color: red;
}
.multiple-input >>> .el-form-item--mini{
  margin-bottom: 0;
}
</style>
